<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品发布</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>

<body>
<div class="layui-panel"style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-green">
        <legend>信息</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="name"autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary"lay-submit="" lay-filter="searchBtn">
                            <li class="layui-icon layui-icon-search">搜索</li>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
</div>
<table class="layui-hide" id="listTable"  lay-filter="listTable">
    <tr class="layui-collapse" lay-accordion="">
        <td  class="layui-collapse" lay-accordion="">
        <td  class="layui-colla-item"></td>
        </td>
    </tr>
</table>

<script id="check"type="text/html" >
    <a class="layui-btn layui-btn-normal layui-btn-xs"lay-event="check">查看</a>
</script>
<script id="tool"type="text/html" >
    {{# if(d.sale==2||d.sale==1){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs"lay-event="publish">发布</a>
    {{# }}}
    {{# if(d.sale==0){ }}
    <a class="layui-btn  layui-btn-xs"lay-event="delete">下架</a>
    {{# }}}
</script>
</body>
<script id="photo" type="text/html">
    <img th:src="@{/img/sendEmail.jpg}" style="width: 30px;height: 60px;">
</script>
<script id="sharePhoto" type="text/html">
    <img th:src="@{/img/header.jpg}"style="width: 30px;height: 60px;">
</script>
<script>

    var $;
    layui.use(['table','form','jquery','layer'], function(){
        var table=layui.table,
            layer=layui.layer,
            form=layui.form;
        $=layui.jquery
        table.render({
            elem: '#listTable',
            limit:10,
            url:'/system/gl/find',
            limits:[5,10,20,30],
            toolbar:'#tableBar',
            page:true,
            cols: [
                [
                    {type:'checkbox',fixed:'left'},
                    {field:'id', width:100, title: '商城ID',sort: true,},
                    {field:'name', width:288, title: '名称',sort: true,align: 'center'},
                    {field:'photo', width:188, title: '图片',templet: '#photo',align: 'center'},
                    {field:'sharePhoto', width:132, title: '分享图',templet: '#sharePhoto',align: 'center'},
                    {field:'details', width:75, title: '详情',toolbar:'#check'},
                    {field:'marketPrice', width:155, title: '原价',align: 'center',style:"text-decoration: line-through;color: #d90606"},
                    {field:'nowPrice', width:118, title: '当前价格',align: 'center',},
                    {field:'newProduct', width:100, title: '是否为新品',
                        templet:function (obj){
                            var isNew = obj.newProduct;
                            var str = "";
                            if(isNew==0){
                                str = "<span style='color: #06b8e5'>新品</span>"
                            }else if(isNew==1){
                                str = "<span style='color: #10bb4f'>非新品</span>"
                            }else{
                                str = "<span style='color: #aa0808'>Unknown</span>"
                            }
                            return str;
                        }
                    },
                    {field:'hotProduct', width:100, title: '是否热品',
                        templet:function (obj){
                            var isHot = obj.hotProduct;
                            var str = "";
                            if(isHot==0){
                                str = "<span style='color: #d90606'>热品</span>"
                            }else if(isHot==1){
                                str = "<span style='color: #0dc8d5'>非热品</span>"
                            }else{
                                str = "<span style='color: #d74d4d'>Unknown</span>"
                            }
                            return str;
                        }
                    },
                    {field:'sale', width:100, title: '是否在售',
                        templet:function (obj){
                            var isSale = obj.sale;
                            var str = "";
                            if(isSale==0){
                                str = "<span style='color: #e65a27'>在售</span>"
                            }else if(isSale==1){
                                str = "<span style='color: #abb1b1'>已下架</span>"
                            }else if(isSale==2){
                                str = "<span style='color: #269226'>未上架</span>"
                            }
                            else if(isSale==3){
                                str = "<span style='color: #00f'>售罄</span>"
                            }
                            else if(isSale==4){
                                str = "<span style='color: #00f'>正在交易</span>"
                            }
                            else{
                                str = "<span style='color: #624dd7'>Unknown</span>"
                            }
                            return str;
                        }
                    },
                    {fixed:'right',title:'操作',width:250,align:'center',toolbar:'#tool'}
                ]
            ]
        })
        form.on('submit(searchBtn)',function(data){
            var dataFrom=data.filed;
            console.log(dataFrom);
        })
        var active={
            dialog:function (content){
                layer.open({
                    type:2,
                    content:content,
                    area:['800px','750px'],
                    maxmin:true,
                    btn:['关闭'],
                })
            },
            deleted:function (id){
                $.ajax({
                    type:'post',
                    url: '/system/gl/takeDown/'+id,
                    data:{
                        id:id,
                        sale:1
                    },
                    dataType:'json',
                    success:function (result) {
                        layer.msg(result.msg);
                        if(result.is){
                            let index =parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);//关闭父页面窗口
                        }
                    }
                })
            },
            updates:function (id){
                $.ajax({
                    type:'post',
                    url: '/system/gl/updateNews/'+id,
                    data:{
                        id:id,
                        sale:0
                    },
                    dataType:'json',
                    success:function (result) {
                        layer.msg(result.msg);
                        if(result.is){
                            let index =parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);//关闭父页面窗口
                        }
                    }
                })
            }
        }

        table.on('tool(listTable)',function (obj) {
            var event = obj.event;
            if("check" == event){
                active.dialog('/page/system/listLook/'+obj.data.id);
            }
            else if("publish"==event){
                layer.confirm("确认要发布ID为"+obj.data.id+"的商品吗",function (){
                    active.updates(obj.data.id);
                })
            }
            else if("delete"==event){
                layer.confirm("确认要下架ID为"+obj.data.id+"的商品吗",function (){
                    active.deleted(obj.data.id);
                })
            }
        })
    })
</script>
</html>
